<template>
  <div class="playlist">
    <music-list :list="playList" @select="selectItem" />
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import musicList from '@/components/musicList/index.vue';

export default {
  name: 'playlist',
  components: {
    musicList,
  },
  computed: {
    ...mapGetters(['playList']),
  },
  methods: {
    selectItem(item, index) {
      if (item.id !== this.playList.id) {
        this.setCurrentIndex(index);
        this.setPlaying(true);
      }
    },
    ...mapMutations({
      setCurrentIndex: 'SET_CURRENTINDEX',
      setPlaying: 'SET_PLAYING',
    }),
  },
};
</script>

<style lang="scss" scoped>
.playlist {
  height: 100%;
}
</style>
